import React from 'react';
import styled from '@emotion/styled';
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

const Player = styled.div`
  width: 100vw;
  height: 100vh;
`;

class ReactRRWebPlayer extends React.PureComponent {
  constructor(props) {
    super(props);
    this.playRef = React.createRef();
  }
  componentDidMount(props) {
    const { events, autoPlay, width, height } = this.props;

    this.player = new rrwebPlayer({
      target: this.playRef.current,
      data: {
        showController: false,
        autoPlay,
        events,
        width,
        height
      }
    });
  }
  render() {
    return <Player ref={this.playRef}></Player>;
  }
}

export default ReactRRWebPlayer;
